// src/views/script.js
document.addEventListener('DOMContentLoaded', () => {
  const filePathInput = document.getElementById('filePathInput');
  const loadButton = document.getElementById('loadButton');
  const variablesList = document.getElementById('variablesList');
  const searchInput = document.getElementById('searchInput');

  const vscode =  window.acquireVsCodeApi();

  let allVariables = [];
  
  // Listen for messages from the extension host
  window.addEventListener('message', event => {
    const message = event.data;

    switch (message.command) {
      case 'fileContent':
        allVariables = message.content;
        displayVariables(allVariables);
        break;
      case 'errorMessage':
        console.log(message.errorMessage);
        break;
      case 'setLastFilePath':
        if (message.filePath) {
          filePathInput.value = message.filePath;
          loadVariables();
        }
        break;
      default:
        break;
    }
  });

  function loadVariables() {
    const filePath = filePathInput.value.trim();
    if (!filePath) {
      return;
    }

    try {
      vscode.postMessage({
        command: 'readAndEvaluateFile',
        filePath: filePath
      });
    } catch {
      // 
    }
  }

  loadButton.addEventListener('click', loadVariables);


  function displayVariables(variables) {
    console.log('🚀 ~ displayVariables ~ variables:', variables);
    const variablesList = document.getElementById('variablesList'); // Ensure this ID matches your HTML
    variablesList.innerHTML = '';

    for (const variable of variables) {
        const li = document.createElement('li');

        // Create color block div
        const colorBlock = document.createElement('div');
        colorBlock.className = 'color-block';
        colorBlock.style.backgroundColor = variable.color;

        const variableWrap = document.createElement('div');
        variableWrap.className = 'variable-wrap';

        // Create variable name div
        const variableName = document.createElement('div');
        variableName.className = 'variable-name';
        variableName.textContent = variable.name;
        // Create variable name div
        const variableValue= document.createElement('div');
        variableValue.className = 'variable-value';
        variableValue.textContent = variable.color;
        variableWrap.appendChild(variableName);
        variableWrap.appendChild(variableValue);

        // Create copy button
        const copyButton = document.createElement('button');
        copyButton.className = 'copy-button';
        copyButton.textContent = 'Copy';
        copyButton.addEventListener('click', () => {
            navigator.clipboard.writeText(`${variable.name}`).then(() => {
              vscode.postMessage({ command: 'showNotification', message: `Copied ${variable.name}: ${variable.color} to clipboard` });
            });
        });

        // Append elements to li
        li.appendChild(colorBlock);
        li.appendChild(variableWrap);
        li.appendChild(copyButton);

        // Append li to ul
        variablesList.appendChild(li);
    }
}

  function displayError(errorMessage) {
    variablesList.innerHTML = `<p class="error">${errorMessage}</p>`;
  }

  searchInput.addEventListener('input', () => {
    const query = searchInput.value.toLowerCase();
    console.log('🚀 ~ searchInput.addEventListener ~ query:', query);
    const filteredVariables = allVariables.filter(variable =>
      variable.name.toLowerCase().includes(query) || variable.color.toLowerCase().includes(query)
    );
    displayVariables(filteredVariables);
  });
});
